<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="/static/img/b-1.png"></image>
		<image class="img-b" src="/static/img/b-2.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<view class="t-b2"></view>
		<form class="cl">
			<!-- 登录账号 -->
			<view class="login-form-item">
				<u-input v-model="username" placeholder="请输入登录用户名" maxlength="30">
					<u-icon slot="prefix" name="account" size="35px"></u-icon>
				</u-input>
			</view>
			<!-- 登录密码 -->
			<view class="login-form-item">
				<u-input v-model="password" type="password" placeholder="请输入登录密码" maxlength="16">
					<u-icon slot="prefix" name="lock" size="35px"></u-icon>
				</u-input>
			</view>
			<!-- 图形验证码 -->
			<view class="login-form-item t-captcha">
				<u-input v-model="captchaCode" @confirm="login()" type="number" placeholder="请输入验证码" maxlength="4">
					<u-icon slot="prefix" name="fingerprint" size="35px"></u-icon>
				</u-input>
				<image :src="captcha" @click="getCaptcha" class="t-captcha-img"></image>
			</view>
			<button @tap="login()">登 录</button>
		</form>
		<view class="url_config">
			<view>
				当前服务地址：
			</view>
			<u-input v-model="baseurl.proUrl" style="width: 100%;">
			</u-input>
			<u-button size="small" type="primary" text="修改" style="width: 30rpx;margin-left: 10rpx;"
				@click="show=true"></u-button>
		</view>
		<u-modal :show="show" @confirm="confirm" @cancel="show = false" :showCancelButton="true" title="确认要修改此地址吗？"
			ref="uModal" :closeOnClickOverlay="true" @close="show = false"></u-modal>
		</u-action-sheet>
	</view>
</template>
<script>
	import {
		image,
		getArea
	} from '@/api/captcha'
	import {
		isEmpty
	} from '@/utils/verify.js'
	import {
		encrypt
	} from '@/utils/rsa'
	import {
		uniDataSelect
	} from '@dcloudio/uni-ui'
	import storage from '@/utils/storage'
	export default {
		data() {
			return {
				title: '智能仓储操作系统',
				subTitle: '欢迎回来，开始工作吧！',
				// 图形验证码信息
				captcha: null,
				// 登录账号
				username: 'admin',
				// 密码
				password: '123456',
				// 图形验证码
				captchaCode: '',
				uuid: '',
				baseurl: require('@/config/environment.js'),
				show: false,
				areaList: [],
				showFloor: false,
				showArea: true,
				area: ''
			};
		},
		components: {
			uniDataSelect
		},
		created() {
			// 获取图形验证码
			this.getCaptcha()
		},
		methods: {
			// 获取图形验证码
			getCaptcha() {
				const app = this
				image().then(result => {
					app.captcha = result.img
					app.uuid = result.uuid
				})
			},
			// 验证表单内容
			validItem() {
				const app = this
				if (isEmpty(app.username)) {
					uni.$u.toast('请输入登录用户名')
					return false
				}
				if (isEmpty(app.password)) {
					uni.$u.toast('请输入登录密码')
					return false
				}
				if (isEmpty(app.captchaCode)) {
					uni.$u.toast('请输入验证码')
					return false
				}
				return true
			},
			// 确认登录
			login() {
				const app = this
				let valid = app.validItem();
				if (valid) {
					app.isLoading = true
					app.$store.dispatch('Login', {
							username: app.username,
							password: encrypt(app.password),
							code: app.captchaCode,
							uuid: app.uuid
						}).then(result => {
							storage.set('area', this.area)
							uni.switchTab({
								url: '/pages/work/index',
								fail(err) {
									console.log(err)
								}
							})
						})
						.catch(err => {
							app.captchaCode = ''
							app.getCaptcha()
						})
						.finally(() => app.isLoading = false)
				}
			},
			areaSelect(e) {
				this.area = e.name
			},
			confirm() {
				storage.set('baseUrl', this.baseurl.proUrl);
				this.show = false
				this.getCaptcha()
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import 'index.scss';

	.url_config {
		position: absolute;
		top: 40rpx;
		left: 10rpx;
		display: flex;
		align-items: center;
	}
</style>